<template>
	<div>
		<div
			v-for="(machineItem, machineIndex) in dataList"
			:key="machineIndex"
			class="working-hours-bar-item"
		>
			<el-popover title="看台详情">
				<div style="font-size: 13px;">
					<div>看台时长: {{ machineItem.workingHours }}h</div>
					<div>开始时间: {{ machineItem.beginDateTime }}</div>
					<div>结束时间: {{ machineItem.endDateTime }}</div>
				</div>
				<div slot="reference" class="el-icon-s-flag working-hours-bar-item-label">{{ machineItem.machineName }} </div>
			</el-popover>

			<div class="working-hours-bar-item-right">
				<div
					:style="{ width: `${ machineItem.workingHours / maxVal * 100 }%` }"
					class="working-hours-bar-item-right-inner"
				>
					<span class="text-ellipsis" style="color: #c5c8ce;">{{ machineItem.beginDateTime | filterTime(machineItem.beginDateTime) }}</span>
					<div class="text-ellipsis" style="color: #808695;">{{ `${ machineItem.workingHours }h` }}</div>
					<span class="text-ellipsis" style="color: #c5c8ce;">{{ machineItem.endDateTime | filterTime(machineItem.endDateTime) }}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            },
            maxVal: {
                type: Number,
                default: 0
            }
        },
        filters: {
            filterTime(val) {
                const d = new Date(val);
                const fZero = (v) => v >= 10 ? v : `0${v}`;
                return `${fZero(d.getHours())}:${fZero(d.getMinutes())}`;
            }
        }
    };
</script>
<style scoped lang="scss">
    .working-hours-bar-item {
        display: flex;
        align-items: center;
        .working-hours-bar-item-label {
            width: 80px;
            padding-right: 10px;
            flex-shrink: 0;
            font-size: 13px;
            cursor: pointer;
            color: #2d8cf0;
            box-sizing: border-box;
        }
        .working-hours-bar-item-right {
            width: calc(100% - 80px);
            .working-hours-bar-item-right-inner {
                margin: 2px 0;
                background: #f8f8f9;
                border-bottom: solid 2px #2d8cf0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 4px;
                flex-shrink: 0;
                font-size: 12px;
            }
        }
    }
</style>
